<template>
	<view class="page_view">
		<view class="order-status" v-if="info.logistics">
			<!-- info.logistics.status -->
			{{info.state == 7?'订单已关闭':info.logistics.status}}
		</view>
		<view class="wuliu" @tap="go_wuliu" v-if="info.state ==3 && info.logistics">
			<view class="order-top-flex">
				<image src="/static/images/user/xiaoche.png" class="order-top-flex-left" mode=""></image>
				<view class="order-top-flex-min">
					<view class="order-top-flex-min-top">
						货物状态 <text class="order-top-flex-min-top-right">{{info.logistics.status}}</text>
					</view>
					<view class="order-top-flex-min-bottom">
						{{info.logistics.context}}
					</view>
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="order-top-flex order-info" v-if="info.address">
			<image src="/static/images/user/xiaohead.png" class="order-top-flex-left" mode=""></image>
			<view class="order-top-flex-min">
				<view class="order-top-flex-min-top">
					{{info.address.name}} <text class="order-top-flex-min-top-right1">{{info.address.mobile}}</text>
				</view>
				<view class="order-top-flex-min-bottom">
					{{info.address.address}}
				</view>
			</view>
		</view>
		<view class="goods_info">
			<!-- <view class="goods_info_top" v-if="info.shop">
				<view class="goods_info_top_right">
					{{info.shop.shopname}}
				</view>
			</view> -->
			<view class="" v-for="(item,index) in info.goods" :key="index">
				<view class="desc_info_flex" v-if="item.type !='new'">
					<view class="desc_info_flex_left">
						换购时间
					</view>
					<view class="desc_info_flex_left">
						{{item.original_buytime}}
					</view>
				</view>
				<view class="goods_info_min">
					<view class="goods_info_min_img_viwe"> 
						<image :src="baseUrl.cdnurl+item.image" class="goods_info_min_img" mode="" v-if="item.goods_item.platform == 0"></image>
						<image :src="item.image" class="goods_info_min_img" mode="" v-else></image>
						<view class="new_min_img_view_biaoqian" v-if="item.type =='new'">
							新
						</view> 
					</view>
					
					<view class="goods_info_min_left">
						<view class="goods_info_min_left_top text-line-2">
							{{item.title}}
						</view>
						<view class="goods_info_min_left_min">
							<view class="goods_info_min_left_min_item">
								{{item.difference}}
							</view>
						</view>
						<view class="goods_info_min_left_bottom">
							<view class="goods_info_min_left_bottom_left">
								<text>x{{item.number}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="item.type == 'new'&& ( !info.goods[index+1] || info.goods[index+1].type == 'old')" >
					<view class="goods_info_bottom" @tap="onRefund(info.id, item.refund_status, item.refund_id, index)" v-if="info.state == 2 || info.state == 3 || info.state == 4 || info.state == 6 ">
						<view class="goods_info_bottom_btn">
							{{getRefund(item.refund_status)}}
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="" v-for="(item,index) in info.gifts" :key="index">
				<view class="goods_info_min">
					<image :src="item.image" class="goods_info_min_img" mode=""></image>
					<view class="goods_info_min_left">
						<view class="goods_info_min_left_top text-line-2">
							{{item.title}}
						</view>
						<view class="goods_info_min_left_bottom">
							<view class="goods_info_min_left_bottom_left">
								<text>x{{item.tracking_number}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class=""v-if="item.type == 'new'">
					<view class="goods_info_bottom" @tap="onRefund(info.id, item.refund_status, item.refund_id, index)" v-if="info.state == 2 || info.state == 3 || info.state == 4 || info.state == 6 ">
						<view class="goods_info_bottom_btn">
							{{getRefund(item.refund_status)}}
						</view>
					</view>
				</view>
			</view> -->
			
		</view>
		<view class="desc_info">
			<view class="desc_info_title">
				详细信息
			</view>
			<view class="desc_info_flex">
				<view class="desc_info_flex_left">
					订单类型
				</view>
				<view class="desc_info_flex_left">
					{{order_type == 1?'换购订单':order_type == 2?'图片换购':'正常订单'}}
				</view>
			</view>
			<view class="desc_info_flex">
				<view class="desc_info_flex_left">
					实付积分
				</view>
				<view class="desc_info_flex_left">
					{{info.score}}
				</view>
			</view>
			<view class="desc_info_flex">
				<view class="desc_info_flex_left">
					订单编号
				</view>
				<view class="desc_info_flex_left">
					{{info.order_no}}
				</view>
			</view>
			<view class="desc_info_flex" v-if="info.pay && info.pay.pay_type">
				<view class="desc_info_flex_left">
					支付方式
				</view>
				<view class="desc_info_flex_left">
					{{info.pay.pay_type == 0?'余额':info.pay.pay_type == 1?'微信支付':'支付宝支付'}}
				</view>
			</view>
			<view class="desc_info_flex" v-if="info.tracking_number">
				<view class="desc_info_flex_left">
					旧件物流单号
				</view>
				<view class="desc_info_flex_left">
					{{info.tracking_number}}
				</view>
			</view>
			<view class="desc_info_flex" v-if="info.pay && info.pay.oldstaff_price">
				<view class="desc_info_flex_left">
					旧件抵
				</view>
				<view class="desc_info_flex_left">
					{{info.pay.oldstaff_price}}
				</view>
			</view>
			<view class="desc_info_flex" v-if="info.pay && info.pay.price">
				<view class="desc_info_flex_left">
				{{info.state == 1?'实际应付':'实付'}}
				</view>
				<view class="desc_info_flex_left">
					{{info.pay.price}}
				</view>
			</view>
			<view class="desc_info_flex">
				<view class="desc_info_flex_left">
					下单时间
				</view>
				<view class="desc_info_flex_left">
					{{info.createtime_text}}
				</view>
			</view>
			
		</view>
		<view class="page-bottom" v-if="info.state != 7">
			<!-- <view class="page-bottom-flex">
				<view class="page-bottom-flex-btn page-bottom-flex-right">
					确认收货
				</view>
				<view class="page-bottom-flex-btn page-bottom-flex-left" @tap="go_wuliu">
					查看物流
				</view>
			</view> -->
			<view class="action-box padding-bottom-bj" v-if="info.state == 1">
				<button class="cu-btn round line-black margin-lr-bj" @tap="editAddress(info.id)">修改地址</button>
				<button class="cu-btn round line-black" @tap="cancelOrder(info)">取消订单</button>
				<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="paymentOrder(info.id)">立即支付</button>
			</view>
			<view class="action-box padding-bottom-bj" v-if="info.state == 2">
				<button class="cu-btn round line-black" @tap="toChat(info.shop_id)">联系商家</button>
				<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="editAddress(info.id)">修改地址</button>
			</view>
			<view class="action-box padding-bottom-bj" v-if="info.state == 3">
				<button class="cu-btn round line-black" @tap="onLogistics(info.id)">查看物流</button>
				<button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="confirmOrder(info)">确认收货</button>
			</view>
			<view class="action-box padding-bottom-bj" v-if="info.state == 4">
				<!-- <button class="cu-btn round line-black" @tap="onLogistics(info.id)">查看物流</button> -->
				<button class="cu-btn round margin-lr-bj line-black" @tap="commentOrder(info.id)">评论订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/base.js';
	export default {
		data() {
			return {
				order_id:'',
				info:'',
				baseUrl:config,
				order_type:0,
			}
		},
		onLoad(options) {
			if(options.id){
				this.order_id = options.id
			}
			if(options.type){
				this.order_type = options.type
			}
			this.getInfo()
		},
		onShow() {
			// this.getInfo()
		},
		
		methods: {
			//支付订单
			paymentOrder(id){
				this.$wanlshop.to(`/pages/page/pay?order_id=${id}&order_type=goods`);
			},
			// 获取订单详情
			getInfo(id) {
				this.$get({
					url: '/wanlshop/order/getOrderInfo',
					data: {
						id:id?id:this.order_id
					}
				}).then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			go_wuliu(){
				uni.navigateTo({
					url:'/pages/UserCenter/MyOrders/LogisticsInfo/LogisticsInfo?id='+this.info.id
				})
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
			},
			//取消订单- 设置为7 -全局
			cancelOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/cancelOrder',
					data: {
						id: item.id
					},
					success: res => {
						// let { stateTip, stateTipColor } = this.orderStateExp(7);
						// item = Object.assign(item, {
						// 	state: 7,
						// 	stateTip,
						// 	stateTipColor
						// });
						this.$store.commit('statistics/order', {
							pay: this.$store.state.statistics.order.pay - 1,
							whole: this.$store.state.statistics.order.whole - 1
						});
						uni.showToast({
							title:'取消成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
						// // 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
						// let list = this.navList[1].orderList;
						// let index = list.findIndex(val => val.id === item.id);
						// index !== -1 && list.splice(index, 1);
						// // 删除后修改全部中的为7
						// if (this.tabCurrentIndex == 1) {
						// 	let list = this.navList[0].orderList;
						// 	let index = list.findIndex(val => val.id === item.id);
						// 	if (index !== -1) {
						// 		list[index].state = 7;
						// 	}
						// }
						// uni.hideLoading();
					}
				});
			},
			// 修改地址
			editAddress(id) {
				this.$wanlshop.to('/pages/UserCenter/MyAddress/MyAddress?isChoose=2&order_id=' + id);
			},
			tuihuo(){
				// url: '/pages/UserCenter/MyOrders/ReturnOfGoods/ReturnOfGoods?item=' + encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url:'/pages/UserCenter/MyOrders/ReturnOfGoods/ReturnOfGoods'
				})
			},
			//添加或修改成功之后回调
			async refreshList(address_id, order_id) {
				console.log(address_id,order_id)
				uni.showLoading({
					title: '正在提交新地址'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/editOrderAddress',
					data: {
						id: order_id,
						address_id: address_id
					},
					success: res => {
						this.$wanlshop.msg('地址修改成功');
						uni.hideLoading();
						this.getInfo()
					}
				});
			},
			//确认收货- 全局
			confirmOrder(item){
				uni.showLoading({
					title: '请稍后'
				});
				// 获取列表
				this.$api.post({
					url: '/wanlshop/order/confirmOrder',
					data: {
						id: item.id
					},
					success: res => {
						// let { stateTip, stateTipColor } = this.orderStateExp(4);
						// item = Object.assign(item, {
						// 	state: 4,
						// 	stateTip,
						// 	stateTipColor
						// });
						this.$store.commit('statistics/order', {
							receiving: this.$store.state.statistics.order.receiving - 1,
							evaluate: this.$store.state.statistics.order.evaluate + 1
						});
						uni.hideLoading();
						uni.showToast({
							title:'确认成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				});
			},
			commentOrder(id){
				this.$wanlshop.to('/pages/UserCenter/MyOrders/PublishEvaluation/PublishEvaluation?order_id=' + id);
			},
			onLogistics(id){
				uni.navigateTo({
					url:'/pages/UserCenter/MyOrders/LogisticsInfo/LogisticsInfo?id='+id
				})
			},
			onRefund(order_id, refund_status, refund_id, index){
				if (refund_status == 0) { //申请退款
					let data = {
						order_id: this.info.id,
						order_type: 'goods',
						goods: this.info.goods[index],
						pay:this.info.pay,
						freight_type: this.info.freight_type,
						discount_price: this.info.pay.discount_price,
						goods_number: this.info.goods.length
					}
					uni.setStorageSync('ReturnOfGoodsUrl', JSON.stringify(data))
					this.$wanlshop.to(`/pages/UserCenter/MyOrders/ReturnOfGoods/ReturnOfGoods`);
					// this.$wanlshop.to(`/pages/UserCenter/MyOrders/ReturnOfGoods/ReturnOfGoods?data=${encodeURIComponent(JSON.stringify(data))}`);
				}else{ // 查看详情
					this.$wanlshop.to(`/pages/UserCenter/refund/details?id=${refund_id}`);
				}
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #F4F4F4;
	}
	.page_view{
		padding-bottom: 200rpx;
	}
.action-box{
		display: flex;
		    justify-content: flex-end;
		    align-items: center;
		    position: relative;
			padding-bottom: 0;
			margin-top: 30rpx;
	}
	.wuliu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 22rpx;
	}

	.order-status {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		/* margin-top: 22rpx; */
		position: relative;
		top: 22rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #262626;
		line-height: 80rpx;
		padding-left: 32rpx;
		box-sizing: border-box;
	}

	.order-info {
		padding: 0 32rpx;
		border-bottom: #F4F4F4 solid 2rpx;
	}

	.order-top-flex {
		display: flex;
		align-items: center;
		background-color: #fff;

		box-sizing: border-box;
		height: 154rpx;

	}

	.order-top-flex-left {
		width: 44rpx;
		height: 44rpx;
	}

	.order-top-flex-min {
		margin-left: 22rpx;
	}

	.order-top-flex-min-top {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #262626;
	}

	.order-top-flex-min-top-right {
		margin-left: 24rpx;
	}

	.order-top-flex-min-bottom {
		font-size: 22rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #626262;
		margin-top: 16rpx;
	}

	.order-top-flex-min-top-right1 {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #626262;
		margin-left: 24rpx;
	}

	.goods_info {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 22rpx;
		border-bottom: #F4F4F4 solid 2rpx;
	}

	.goods_info_top {
		display: flex;
		align-items: center;
	}

	.goods_info_top_img {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #262626;
	}

	.goods_info_top_right {
		margin-left: 6rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #333333;
	}

	.goods_info_min {
		display: flex;
		align-items: center;
		margin-top: 26rpx;
		justify-content: space-between;
	}
.goods_info_min_img_viwe{
	min-width: 176rpx;
	width: 176rpx;
	height: 176rpx;
	position: relative;
}

	.goods_info_min_img {
		min-width: 176rpx;
		width: 176rpx;
		height: 176rpx;
		border-radius: 12rpx;
		border: #F4F4F4 solid 2rpx;
		margin-right: 20rpx;
	}

	.goods_info_min_left_min {
		display: flex;
		align-items: center;
	}

	.goods_info_min_left_min_item {
		border: 2rpx solid #626262;
		padding: 0rpx 12rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 4rpx;
		margin-right: 12rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		margin-top: 10rpx;
	}

	.goods_info_min_left_top {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #262626;
	}

	.goods_info_min_left_bottom_left_font {
		font-size: 28rpx;
	}

	.goods_info_min_left_bottom_left {
		font-size: 22rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}

	.goods_info_min_left_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}

	.goods_info_bottom {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}

	.goods_info_bottom_btn {
		width: 176rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border: 1rpx solid #262626;
		margin-top: 32rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.desc_info {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.desc_info_title {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #262626;
	}

	.desc_info_flex {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #626262;
	}

	.page-bottom {
		width: 100%;
		height: 176rpx;
		background: #FFFFFF;
		border: 2rpx solid #F4F4F4;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.page-bottom-flex {
		width: 100%;
		height: 108rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}

	.page-bottom-flex-btn {
		width: 224rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		margin-left: 20rpx;
	}

	.page-bottom-flex-right {
		background: linear-gradient(270deg, #E46C30 0%, #E32C1C 100%);
		color: #FFFFFF;
	}

	.page-bottom-flex-left {
		border: 2rpx solid #262626;
		color: #262626;
	}
	.zhihuan{
		width: 36rpx;
		height: 36rpx;
		margin: 28rpx 32rpx;
	}
	
	.new_min_img_view_biaoqian{
		width: 54rpx;
		height: 32rpx;
		background: #27CF23;
		border-radius: 12rpx 0rpx 12rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		line-height: 32rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #FFFFFF;
	}
	.goods_info_min_left{
		width: calc(100% - 196rpx);
	}
</style>